<template>
	<view class="vtabs">
		<view class="tab" v-for="(item,index) in tabs" :key="index" @click="tabSelected(index)">
			<view class="title" :style="{color:activeIndex==index?activeColor:inactiveColor}">{{item}}</view>
			<view class="line" :style="{'background-color':activeIndex==index?activeColor:inactiveColor}"></view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tabs:{
				type:Array,
				default(){
					return []
				}
			},
			activeIndex:{
				type:Number,
				default:0
			},
			activeColor:{
				type:String,
				default:"#4a96f2"
			},
			inactiveColor:{
				type:String,
				default:"#333333"
			}
		},
		methods:{
			tabSelected(index){
				this.$emit('tabSelected',index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vtabs{
		text-align: center;
		font-size: 28upx;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		padding-top: 18upx;
		height: 80upx;
		// display: flex;
	}
	.tab{
		display: inline-block;
		padding: 0 40upx;
	}
	.title{
		
	}
	.line{
		margin: 20upx 16upx 0;
		height: 4upx;
		border-radius: 2upx;
	}
</style>
